import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/mine/xin_he_apply_sale_after/xin_he_apply_back_goods_and_money/xin_he_drag_sort_view.dart';
import 'package:xin_he/page/mine/xin_he_apply_sale_after/xin_he_apply_back_goods_and_money/xin_he_upload_images_model.dart';

import '../../../../utils/xh_styles.dart';
import '../../../../utils/xin_he_image.dart';
import '../xin_he_back_money_reason/xin_he_back_money_reason_view.dart';
import 'xin_he_apply_back_goods_and_money_logic.dart';


class XinHeApplyBackGoodsAndMoneyPage extends StatelessWidget {
  XinHeApplyBackGoodsAndMoneyPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeApplyBackGoodsAndMoneyLogic());
  final state = Get.find<XinHeApplyBackGoodsAndMoneyLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text(logic.title.value,style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Column(children: [
        Container(
          margin: EdgeInsets.symmetric(vertical: 10),
          padding: EdgeInsets.symmetric(horizontal: 15),
          color: Colors.white,
          child: _backMoneyView(),
        ),

        Container(
          color: Colors.white,
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: Column(children: [
            const SizedBox(height: 10,),
            Container(height: 32.5,
              alignment: Alignment.centerLeft,
              child: Text('补充描述和凭证',style: TextStyle(color: XinHeStyle.black333FontColor,fontSize: 13,fontWeight: FontWeight.w500),),
            ),

            Container(
              height: 191,
              decoration: BoxDecoration(color: XinHeColor('#F2F6F7'),borderRadius: BorderRadius.circular(5)),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                Container(
                  margin: const EdgeInsets.only(
                    top: 8,
                  ),
                  padding: const EdgeInsets.only(
                      top: 8, bottom: 8, left: 16, right: 16),
                  height: 100,
                  color: XinHeColor('#F2F6F7'),
                  child: TextField(
                    maxLength: 200,
                    maxLines: 8,

                    onChanged: (value){
                      logic.setFeedbackText(value);

                    },
                    style:  TextStyle(
                        color: XinHeColor("#15161F"), fontSize: 14 ,fontWeight: FontWeight.w400),
                    decoration:  InputDecoration(
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.zero,
                        hintText: "请输入描述",
                        counterStyle: TextStyle(
                            color: XinHeColor("#999999"), fontSize: 12),
                        hintStyle:  TextStyle(
                            color: XinHeColor("#999999"), fontSize: 12)),
                  ),
                ),

                  // DragSortView(
                  //   logic.imageList,
                  //   space: 5,
                  //   margin: const EdgeInsets.only(
                  //       left: 16, right: 16, top: 8, bottom: 100),
                  //   padding: const EdgeInsets.all(0),
                  //   itemBuilder: (BuildContext context, int index) {
                  //     ImageBean bean = logic.imageList[index];
                  //     // It is recommended to use a thumbnail picture
                  //     return Stack(
                  //       children: [
                  //         SizedBox(
                  //           width: (Get.width-32-10)/3,
                  //           height: (Get.width-32-10)/3,
                  //           child:PictureUtils.getWidget(bean.thumbPath!),
                  //         ),
                  //         GestureDetector(
                  //           onTap: () {
                  //             // logic.deleteImageUpdate(index);
                  //           },
                  //           child: Align(
                  //             alignment: Alignment.topRight,
                  //             child: Container(
                  //               color: Colors.transparent,
                  //               width: 0,
                  //               height: 0,
                  //               child: const Icon(
                  //                 Icons.ice_skating,
                  //                 size: 0,
                  //               ),
                  //             ),
                  //           ),
                  //         )
                  //       ],
                  //     );
                  //   },
                  //   initBuilder: (BuildContext context) {
                  //     return logic.imageList.length == 3
                  //         ? Container()
                  //         : InkWell(
                  //       onTap: () {
                  //         FocusScope.of(context)
                  //             .requestFocus(FocusNode());
                  //         logic.selectPictures(context);
                  //       },
                  //       child: Container(
                  //         color: const Color(0xFFF0F0F0),
                  //         child: Center(
                  //           child: Image.asset(
                  //             "assets/images/mina/mina_feedback_add.png",
                  //           ),
                  //         ),
                  //       ),
                  //     );
                  //   },
                  //   onDragListener: (MotionEvent event, double itemWidth) {
                  //     switch (event.action) {
                  //       case MotionEvent.actionDown:
                  //         logic.moveAction = event.action!;
                  //         break;
                  //       case MotionEvent.actionMove:
                  //         double x = event.globalX! + itemWidth;
                  //         double y = event.globalY! + itemWidth;
                  //         double maxX =
                  //             MediaQuery.of(context).size.width - 1 * 100;
                  //         double maxY =
                  //             MediaQuery.of(context).size.height - 1 * 100;
                  //         print(
                  //             'Sky24n maxX: $maxX, maxY: $maxY, x: $x, y: $y');
                  //         if (logic.canDelete && (x < maxX || y < maxY)) {
                  //           logic.canDelete = false;
                  //         } else if (!logic.canDelete &&
                  //             x > maxX &&
                  //             y > maxY) {
                  //           logic.canDelete = true;
                  //         }
                  //         break;
                  //       case MotionEvent.actionUp:
                  //         logic.moveAction = event.action!;
                  //         if (logic.canDelete) {
                  //           logic.canDelete = false;
                  //           return true;
                  //         } else {}
                  //         break;
                  //     }
                  //     return false;
                  //   },
                  // ),


                  Padding(
                  padding: const EdgeInsets.only(left: 15),
                  child: Stack(children: [
                    const XinHeAssetImage('assets/images/mine/upload_border_bg.png',width: 70,height: 70,),
                    Positioned(
                        width: 70,
                        height: 70,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            const SizedBox(height: 26,),
                            const XinHeAssetImage('assets/images/mine/upload_camera.png',width: 18,height: 14.5,),
                            Text('上传凭证',style: TextStyle(color: XinHeColor('#B3B3B3'),fontSize: 10,fontWeight: FontWeight.w500)),
                            Text('（最多3张）',style: TextStyle(color: XinHeColor('#B3B3B3'),fontSize: 10,fontWeight: FontWeight.w500)),


                          ],))
                  ],),
                ),
              ],),
            )
          ],),),


        Spacer(),

        Container(
          height: 45,
          margin:const EdgeInsets.symmetric(horizontal: 15),
          width: double.infinity,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            gradient: LinearGradient(colors: [ XinHeColor('##F89A30'), XinHeColor('#E84128')]),
            borderRadius: BorderRadius.circular(22.5),
          ),
          child: const Text('提交',style: TextStyle(color: Colors.white,fontSize: 14),strutStyle: StrutStyle(forceStrutHeight: true),),
        ),

        SizedBox(height: 28+Get.mediaQuery.padding.bottom,)

      ],),

    );
  }

  Widget _backGoodsAndMoneyView() {
    return Column(
      children: [
        ///退货原因
        Container(
          height: 45,
          alignment: Alignment.centerLeft,
          child: Row(children: [
            Text('退货原因',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13),),
            Spacer(),
            GestureDetector(
                onTap: (){
                  Get.bottomSheet(XinHeBackMoneyReasonPage(),isScrollControlled: true);
                },
                child: Text('请选择原因',style: TextStyle(color: XinHeColor('#999999'),fontSize: 13))),
            SizedBox(width: 5,),
            const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
            // Row(
            //   mainAxisSize: MainAxisSize.min,
            //   children: [
            //
            //
            //   ],
            // )
          ],),),
        Container(height: 0.5,width: double.infinity,color: XinHeColor('#E7EEEF'),),

        ///退货金额
        Container(
          height: 45,
          alignment: Alignment.centerLeft,
          child: Row(children: [
            Text('退款金额',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13),),
            Spacer(),
            Container(
              width: 100,
              alignment: Alignment.centerRight,
              child: TextField(
                // maxLength: 8,
                maxLines: 1,
                keyboardType: TextInputType.number,
                textAlign: TextAlign.right,
                onChanged: (value){
                  logic.setMoneyText(value);
                },
                style:  TextStyle(
                    color: XinHeColor("#15161F"), fontSize: 14 ,fontWeight: FontWeight.w400),
                decoration:  InputDecoration(
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.zero,
                    hintText: "请输入退款金额",
                    counterStyle: TextStyle(
                        color: XinHeColor("#999999"), fontSize: 12),
                    hintStyle:  TextStyle(
                        color: XinHeColor("#999999"), fontSize: 12)),
              ),
            ),
            const SizedBox(width: 5+6,),

          ],),),
        Container(height: 0.5,width: double.infinity,color: XinHeColor('#E7EEEF'),),

        Container(
          // height: 45,
          alignment: Alignment.centerLeft,
          child: Row(children: [
            Text('我的地址',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13),),
            const Spacer(),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10),
              child: SizedBox(
                width: 205,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text('张小姐 13902504524',softWrap: true,style: TextStyle(color: XinHeColor('#999999'),fontSize: 13)),
                    Text('广东省深圳市龙华区龙华大道10号龙华 大厦大浪街道区宝龙大厦 ',textAlign: TextAlign.right,style: TextStyle(color: XinHeColor('#999999'),fontSize: 13)),

                  ],
                ),
              ),
            ),
            const SizedBox(width: 5,),

            const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
          ],),),



      ],
    );
  }

  Widget _backMoneyView() {
    return Column(
      children: [
        ///退货原因
        Container(
          height: 45,
          alignment: Alignment.centerLeft,
          child: Row(children: [
            Text('退货原因',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13),),
            Spacer(),
            GestureDetector(
                onTap: (){
                  Get.bottomSheet(XinHeBackMoneyReasonPage(),isScrollControlled: true);
                },
                child: Text('请选择原因',style: TextStyle(color: XinHeColor('#999999'),fontSize: 13))),
            SizedBox(width: 5,),
            const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
            // Row(
            //   mainAxisSize: MainAxisSize.min,
            //   children: [
            //
            //
            //   ],
            // )
          ],),),
        Container(height: 0.5,width: double.infinity,color: XinHeColor('#E7EEEF'),),

        ///退货金额
        Container(
          height: 45,
          alignment: Alignment.centerLeft,
          child: Row(children: [
            Text('退货金额',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13),),
            Spacer(),
            Container(
              width: 100,
              alignment: Alignment.centerRight,
              child: TextField(
                // maxLength: 8,
                maxLines: 1,
                keyboardType: TextInputType.number,
                textAlign: TextAlign.right,
                onChanged: (value){
                  logic.setMoneyText(value);
                },
                style:  TextStyle(
                    color: XinHeColor("#15161F"), fontSize: 14 ,fontWeight: FontWeight.w400),
                decoration:  InputDecoration(
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.zero,
                    hintText: "请输入退款金额",
                    counterStyle: TextStyle(
                        color: XinHeColor("#999999"), fontSize: 12),
                    hintStyle:  TextStyle(
                        color: XinHeColor("#999999"), fontSize: 12)),
              ),
            ),
            const SizedBox(width: 5+6,),

          ],),),
        Container(height: 0.5,width: double.infinity,color: XinHeColor('#E7EEEF'),),




      ],
    );
  }

  Widget _changeGoodsView() {
    return Column(
      children: [
        ///换货原因
        Container(
          height: 45,
          alignment: Alignment.centerLeft,
          child: Row(children: [
            Text('换货原因',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13),),
            Spacer(),
            GestureDetector(
                onTap: (){
                  Get.bottomSheet(XinHeBackMoneyReasonPage(),isScrollControlled: true);
                },
                child: Text('请选择原因',style: TextStyle(color: XinHeColor('#999999'),fontSize: 13))),
            SizedBox(width: 5,),
            const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
            // Row(
            //   mainAxisSize: MainAxisSize.min,
            //   children: [
            //
            //
            //   ],
            // )
          ],),),
        Container(height: 0.5,width: double.infinity,color: XinHeColor('#E7EEEF'),),

        ///退货金额
        Container(
          height: 45,
          alignment: Alignment.centerLeft,
          child: Row(children: [
            Text('换货商品',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13),),
            Spacer(),
            Container(
              width: 100,
              alignment: Alignment.centerRight,
              child: TextField(
                // maxLength: 8,
                maxLines: 1,
                keyboardType: TextInputType.number,
                textAlign: TextAlign.right,
                onChanged: (value){
                  logic.setMoneyText(value);
                },
                style:  TextStyle(
                    color: XinHeColor("#15161F"), fontSize: 14 ,fontWeight: FontWeight.w400),
                decoration:  InputDecoration(
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.zero,
                    hintText: "请备注需换货商品",
                    counterStyle: TextStyle(
                        color: XinHeColor("#999999"), fontSize: 12),
                    hintStyle:  TextStyle(
                        color: XinHeColor("#999999"), fontSize: 12)),
              ),
            ),
            const SizedBox(width: 5+6,),

          ],),),
        Container(height: 0.5,width: double.infinity,color: XinHeColor('#E7EEEF'),),

        Container(
          // height: 45,
          alignment: Alignment.centerLeft,
          child: Row(children: [
            Text('我的地址',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13),),
            const Spacer(),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10),
              child: SizedBox(
                width: 205,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text('张小姐 13902504524',softWrap: true,style: TextStyle(color: XinHeColor('#999999'),fontSize: 13)),
                    Text('广东省深圳市龙华区龙华大道10号龙华 大厦大浪街道区宝龙大厦 ',textAlign: TextAlign.right,style: TextStyle(color: XinHeColor('#999999'),fontSize: 13)),

                  ],
                ),
              ),
            ),
            const SizedBox(width: 5,),

            const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
          ],),),



      ],
    );
  }

}
